<template>
  <NowLoading :mycolor="'transparent'" v-if="isMounted"/>
  <div v-else-if="isKong" class="kong">
      <van-image
      class="kong-img"
     :src="kong"
    />
   <div class="no-commit">暂时没有买家秀~</div>
    </div>
  <div class="buy-show" v-else>
    <ul class="buy-show-tab" v-if="tags!==undefined">
        <li  class="tab-item" v-for="(item,index) in tags" :class="{active:active===index}" @click="changeActive(index,String(item.profile_id))">
          <span>{{item.tag_name}}</span> <span v-if="item.num_desc">{{ item.num_desc }}</span>
        </li>
        </ul>
<div class="buy-show-content">
  <div  class="buy-show-item" v-for="i in mizoneBuyC">
       <div class="title">
     <div class="detail-icon">
      <van-image
        round
     width="1.7rem"
     height="1.7rem"
     :src="i.user_avatar"
    />
    <span class="nickname">{{ i.user_name }}</span>
     </div>
    <UserCtrl :show="show" :id="i.comment_id" @click="changeShow"/>
  </div>

    <p class="content" @click="$router.push({name: 'detail',query:{id:i.comment_id}})" v-html="i.comment_content"></p>
      <div class="pic-list">
   <div class="pic"
   >
    <van-image
         class="pic-img"
        v-for="p in i.image_infos"
         :src="p.img_url"
    />
  </div>
   </div>
     <CardCtrl :praise_num="i.up_num" :answer_num="i.user_reply_num"/>
  </div>
  </div>

</div>


</template>

<script setup lang="ts">
import kong from '../../../../assets/img/no-q.png'
import NowLoading from '../../../../components/NowLoading.vue'
import DetailItem from '../../findItem/recommendItem/DetailItem.vue'
import { comment ,commentTagsDetail} from '../../../../typings'
import { getMizoneBuyerShowList } from '../../../../api/find'
import { onMounted, reactive ,ref} from 'vue'
import { useRoute } from 'vue-router';
const route = useRoute();
let r = Number(route.query.id);
let isMounted = ref<boolean>(true);
const firstTag = ref(true);
const isKong = ref(false);
let mizoneBuyC = reactive<Array<comment>>([]);
let tags = reactive<Array<commentTagsDetail>>([]);
  onMounted( () => {
    getData(r);
    
  })
const getData = async (id: number, b?: string) => {
  let resBuy = await getMizoneBuyerShowList(id,b);
  // if (firstTag.value) {
  //   tags = resBuy.data.detail.comment_tags;
  //   if (tags.length > 10) {
  //     tags = tags.slice(0, 10);
  //   }
  //   console.log("买家秀列表tags获取了");

  //   firstTag.value = false;
  // }
  console.log("1111111111111=>");

  if (resBuy.data === null) {
    isKong.value = true;
    isMounted.value = false;
    return
  }
  mizoneBuyC = resBuy.data.comments;
  console.log("买家秀列表mizoneBuyC=>",mizoneBuyC);
  tags = resBuy.data.detail.comment_tags;
  console.log("买家秀列表tags=>", tags);
  isMounted.value = false;
  
}
let active = ref(0);
const changeActive = (index: number, tagName: string) => {
  isMounted.value = true;
active.value = index;
if (index === 0) {
  getData(r);

} else {
  getData(r, tagName);
}
}
let show = ref(false);
const changeShow = () => {
  show.value = !show.value;
}
// const onfirstLoading = () => {
//   setTimeout(() => {
    
//   }, 800);
// }
</script>

<style lang="scss" scoped>
.buy-show {
  background-color: #f9f9f9;
}
.buy-show-tab {
      display: flex;
      flex-wrap: wrap;
      padding: 1rem 1rem .5rem;
      .tab-item {
        background-color: #fff;
        padding: .4rem .8rem;
        margin: 0rem .5rem .5rem 0rem;
        font-size: .8rem;
        border-radius: 9999rem;
        font-weight: bold;
      }
      .tab-item.active {
        background-color: #ff5934;
        color: #fff;
      }
    }
    .buy-show-content {
      background-color: #f9f9f9;
      
    }
.buy-show-item {
  margin-bottom: .5rem;
  padding: .8rem 1rem;
  background-color: #fff;
}
    .title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  .detail-icon {
  display: flex;
  align-items: center;
  .nickname {
  font-size: 12.5px;
  margin-left: 5px;
}
}

}
.content {
  margin: .6rem 0rem;
  font-size: .95rem;
  display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.pic-list {
  margin-bottom: 10px;
  // border-radius: 6px;
  overflow: hidden;
  .pic {
  border-radius: 5rem;
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-around;
  :deep(.van-image__img) {
    border-radius: .5rem;
    width: 30vw;
    height: 17vh;
    margin-left: .1rem;
    margin-bottom: .2rem;
  }
}
}
.kong {
  // position: relative;
  text-align: center;
  background-color: #f5f5f5;
  // height: 26.85rem;
  height: calc(100vh - 14.79rem);
  .kong-img {
  // position: absolute;
  width: 50vw;
  margin-top: 3rem;
  // margin-left: 50%;

  // left: 50%;
  // top: 50%;
  // height: 45vh;
}
.no-commit {
  font-size: .8rem;
  color: #757575;
}
}
</style>